import 'package:bxultimate/app/router/router_name.dart';
import 'package:bxultimate/app/theme/app_theme.dart';
import 'package:bxultimate/app/theme/gaps.dart';
import 'package:bxultimate/shared/util/util_mk.dart';
import 'package:bxultimate/widgets/mk_page.dart';
import 'package:bxultimate/widgets/mk_scroll_view.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import '../auth_field.dart';
import 'controller.dart';

class AuthSmsLoginPage extends StatefulWidget {
  const AuthSmsLoginPage({Key? key}) : super(key: key);

  @override
  State<AuthSmsLoginPage> createState() => _AuthSmsLoginPageState();
}

class _AuthSmsLoginPageState extends State<AuthSmsLoginPage> {
  final controller = Get.find<AuthSmsLoginController>();
  final state = Get.find<AuthSmsLoginController>().state;

  @override
  Widget build(BuildContext context) {
    return MkPage(
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: TDNavBar(
          backgroundColor: Colors.transparent,
        ),
        body: MkScrollView(
          keyboardConfig: UtilMk.getKeyboardActionsConfig(
              context, <FocusNode>[controller.nodeText1, controller.nodeText2]),
          padding: const EdgeInsets.only(
              left: AppTheme.iDefaultPadding ,
              right: AppTheme.iDefaultPadding ,
              top: AppTheme.iDefaultPadding * 2),
          children: _buildBody,
        ),
      ),
    );
  }

  List<Widget> get _buildBody => <Widget>[
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Center(
          child: Text(
            '手机号验证码登录',
            style: TextStyle(fontSize: 32,fontWeight: FontWeight.bold),
          ),
        ),
        Center(
          child: Text(
            '请使用已注册的手机号',
            style: TextStyle(fontSize: 13),
          ),
        ),
      ],
    ),
    Gaps.vGap32,
    AuthField(
      key: const Key('phone'),
      focusNode: controller.nodeText1,
      controller: controller.phoneController,
      maxLength: 11,
      keyboardType: TextInputType.number,
      hintText: '手机号',
    ),
    Gaps.vGap24,
    AuthField(
      key: const Key('password'),
      keyName: 'password',
      focusNode: controller.nodeText2,
      controller: controller.passwordController,
      hintText: '验证码',
      keyboardType: TextInputType.number,
      getVCode: controller.getVCode,
    ),
    Gaps.vGap12,
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('账号注册',style: TextStyle(color: Colors.blue),),
        Text('忘记密码？',style: TextStyle(color: Colors.blue),),
      ],
    ),
    Gaps.vGap24,
    _buildCheckbox(),
    Gaps.vGap24,
    Obx(() => TDButton(
      theme: TDButtonTheme.primary,
      shape: TDButtonShape.circle,
      height: 50,
      width: Get.width,
      key: const Key('login'),
      onTap: state.clickable ? controller.loginCheck : null,
      disabled: !state.clickable,
      text: '登 录',
    )),
    Gaps.vGap16,

  ];



  _buildCheckbox() {
    TextStyle style = TextStyle(color: TDTheme.of(Get.context!).brandColor5);

    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Obx(() => TDCheckbox(
          backgroundColor: Colors.transparent,
          checked: state.checkboxIsCheck,
          onCheckBoxChanged: (bool checked) {
            state.checkboxIsCheck = checked;
          },
        )),
        Gaps.hGap4,
        Text(
          "我已同意",
        ),
        GestureDetector(
          onTap: () => {Get.toNamed(RouterName.userSystemSettingUserAgreement)},
          child: Text(
            "《用户协议》",
            style: style,
          ),
        ),
        Text("及"),
        GestureDetector(
          onTap: () => {Get.toNamed(RouterName.userSystemSettingPrivacy)},
          child: Text("《隐私政策》",style: style,),
        ),
      ],
    );
  }

  @override
  void dispose() {
    Get.delete<AuthSmsLoginController>();
    super.dispose();
  }
}